<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />

    <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../assets/global/css/plugins.min.css" rel="stylesheet"  type="text/css" />

    <link rel="stylesheet" href="../assets/custom/css/changeother.css"/>
</head>
<body class="contentPadding">
    <div class="from_control form-timeline clearfix" style="opacity: 0">
        <div class="from_control_l">
            <div class="toggle_process">
                <span class="label_on fl margin-right-10">显示流程名:</span>
                <input name="status" type="checkbox" data-type="reload" data-size="mini">
            </div>
            <div class="mt-checkbox-box">
                <label class="mt-checkbox mt-checkbox-outline"> 开启数据量监控
                    <input class="dataMonitor" type="checkbox" value="1" name="test" />
                    <span></span>
                </label>
            </div>
             <div class="toggle_on opacity_none">
                    <input name="status2" type="checkbox" data-type="reload" data-size="mini">
                </div>
             <div  class="timelineBox margin-left-20 opacity_none">
                    <div class="cd-horizontal-timeline mt-timeline-horizontal" data-spacing="60">
                        <div class="timeline">
                            <div class="events-wrapper">
                                <div class="events">
                                    <ol>
                                        <li>
                                            <a href="#0" data-date="2018/05/24" class="border-after-red bg-after-red selected">5.18</a>
                                        </li>
                                        <li>
                                            <a href="#0" data-date="2018/05/23" class="border-after-red bg-after-red">5.17</a>
                                        </li>
                                        <li>
                                            <a href="#0" data-date="2018/05/22" class="border-after-red bg-after-red">5.9</a>
                                        </li>
                                        <li>
                                            <a href="#0" data-date="2018/05/21" class="border-after-red bg-after-red">5.8</a>
                                        </li>
                                        <li>
                                            <a href="#0" data-date="2018/05/20" class="border-after-red bg-after-red">5.7</a>
                                        </li>
                                        <li>
                                            <a href="#0" data-date="2018/05/19" class="border-after-red bg-after-red">5.6</a>
                                        </li>
                                        <li>
                                            <a href="#0" data-date="2018/05/18" class="border-after-red bg-after-red">5.5</a>
                                        </li>
                                        <li>
                                            <a href="#0" data-date="2018/05/17" class="border-after-red bg-after-red">5.4</a>
                                        </li>
                                        <li>
                                            <a href="#0" data-date="2018/05/16" class="border-after-red bg-after-red">5.3</a>
                                        </li>
                                        <li>
                                            <a href="#0" data-date="2018/05/15" class="border-after-red bg-after-red">5.2</a>
                                        </li>
                                        <li>
                                            <a href="#0" id="test_pest" data-date="2018/05/14" class="border-after-red bg-after-red">5.1</a>
                                        </li>
                                    </ol>
                                    <span class="filling-line bg-skyblue" aria-hidden="true"></span>
                                </div>
                                <!-- .events -->
                            </div>
                            <!-- .events-wrapper -->
                            <ul class="cd-timeline-navigation mt-ht-nav-icon">
                                <li>
                                    <a href="#0" class="prev inactive btn btn-outline red md-skip">
                                        <i class="fa fa-chevron-left"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#0" class="next btn btn-outline red md-skip">
                                        <i class="fa fa-chevron-right"></i>
                                    </a>
                                </li>
                            </ul>
                            <!-- .cd-timeline-navigation -->
                        </div>
                        <!-- .timeline -->

                        <!-- .events-content -->
                    </div>
                </div>
             <button class="btn blue-hoki refreshData opacity_none">刷新数据量</button>
        </div>
    </div>
    <div class="contentChained">
        <iframe src="../assets/custom/draw/chainedSearch.html" frameborder="0" width="100%" height="100%"></iframe>
    </div>
</body>
<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="../assets/pages/scripts/components-bootstrap-switch.min.js"></script>
<script src="../assets/global/plugins/horizontal-timeline/horizontal-timeline.js" type="text/javascript"></script>
<script>
    //得到子页面的content
    var obj = $("iframe").eq(0);
    var iframeWin = obj[0].contentWindow;
    //显示流程名switch初始化
    $('[name="status"]').bootstrapSwitch({
        onText:"ON",
        offText:"OFF",
        state:true,
        onColor:"success",
        offColor:"default",
        onSwitchChange:function(event,state){
            if(state===true){
              //  console.log(true)

                var allElementArr = iframeWin.graph.getElements();
                var processObjArr =   allElementArr.filter(function (v) {
                   return v.attributes.type === 'basic.Image'
                });
                console.log(processObjArr);
                $.each(processObjArr,function (i, v) {
                    v.attributes.attrs.text.text =  v.attributes.attrs.image.text;
                    var processView =  iframeWin.paper.findViewByModel(v.id);
                    processView.$el.find('tspan').text(v.attributes.attrs.image.text);
               })

            }else{
                console.log(false);
                var allElementArr = iframeWin.graph.getElements();
                var processObjArr =   allElementArr.filter(function (v) {
                    return v.attributes.type === 'basic.Image'
                });
                console.log(processObjArr);
                $.each(processObjArr,function (i, v) {
                    v.attributes.attrs.text.text =  '';
                    var processView =  iframeWin.paper.findViewByModel(v.id);
                    processView.$el.find('tspan').text('');
                });
            }
        }
    });

    //增量switch初始化
    $('[name="status2"]').bootstrapSwitch({
        onText:"增量",
        offText:"全量",
        state:true,
        onColor:"success",
        offColor:"default",
        onSwitchChange:function(event,state){
            if(state===true){  //增量时的回调，所有线数据为增量
                var allLinkArr = iframeWin.graph.getLinks().filter(function (v, i, arr) {  //筛选有isdata的线数组
                    return v.attributes.attrs.isdata
                });
                $.each(allLinkArr,function (i, v) {
                    if(v.attributes.attrs.rowsizeInc){
                        iframeWin.updateLink(v,parseInt(v.attributes.attrs.rowsizeInc));
                    }

                })
            }else{//全量时的回调，所有线数据为增量
                var allLinkArr = iframeWin.graph.getLinks().filter(function (v, i, arr) {  //筛选有isdata的线数组
                    return v.attributes.attrs.isdata
                });
                $.each(allLinkArr,function (i, v) {
                    if(v.attributes.attrs.rowsizeTotal){
                        iframeWin.updateLink(v,parseInt(v.attributes.attrs.rowsizeTotal));
                    }
                })

            }
        }
    });

    //更换时间日期
    $('.events').on('click','a',function () {
       // console.log($(this).attr('data-date'));
        iframeWin.requestRowsize($(this).attr('data-date'),0);

    });

    //点击复选框
    $('input[name = test]').click(function () {
            $('.toggle_on').toggleClass('opacity_none');
            $('.timelineBox').toggleClass('opacity_none');
            $('.refreshData').toggleClass('opacity_none');

            if($(this).prop('checked')){    //开启数据量监控
                var day = $(".events .selected").attr('data-date');
                iframeWin.requestRowsize(day);
            }else {
                //关闭数据量监控
                var isdataArr =  iframeWin.graph.getLinks().filter(function (v, i, arr) {  //筛选有isdata的线数组
                    return v.attributes.attrs.isdata
                });
                $.each(isdataArr,function (i, v) {
                    iframeWin.updateLink(v,null)
                })
            }
    });

    $('.refreshData').click(function () {   //更新数据量
        var day = $(".events .selected").attr('data-date');
        iframeWin.requestRowsize(day,1);
    })


</script>
</html>